<template>
    <div id="contain">
        <div class="box">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item
                    label="酒店名称"
                    style="width: 450px"
                    :rules="rules"
                >
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="所属省份" :rules="rules">
                    <el-select v-model="form.areaName" placeholder="请选择省份">
                        <el-option label="北京" value="北京"></el-option>
                        <el-option label="天津" value="天津"></el-option>
                        <el-option label="上海" value="上海"></el-option>
                        <el-option label="重庆" value="重庆"></el-option>
                        <el-option label="河北" value="河北"></el-option>
                        <el-option label="河南" value="河南"></el-option>
                        <el-option label="云南" value="云南"></el-option>
                        <el-option label="黑龙江" value="黑龙江"></el-option>
                        <el-option label="湖南" value="湖南"></el-option>
                        <el-option label="安徽" value="安徽"></el-option>
                        <el-option label="山东" value="山东"></el-option>
                        <el-option label="江苏" value="江苏"></el-option>
                        <el-option label="浙江" value="浙江"></el-option>
                        <el-option label="江西" value="江西"></el-option>
                        <el-option label="湖北" value="湖北"></el-option>
                        <el-option label="甘肃" value="甘肃"></el-option>
                        <el-option label="山西" value="山西"></el-option>
                        <el-option label="陕西" value="陕西"></el-option>
                        <el-option label="吉林" value="吉林"></el-option>
                        <el-option label="福建" value="福建"></el-option>
                        <el-option label="贵州" value="贵州"></el-option>
                        <el-option label="广东" value="广东"></el-option>
                        <el-option label="青海" value="青海"></el-option>
                        <el-option label="四川" value="四川"></el-option>
                        <el-option label="海南" value="海南"></el-option>
                        <el-option label="台湾" value="台湾"></el-option>
                        <el-option label="新疆" value="新疆"></el-option>
                        <el-option label="广西" value="广西"></el-option>
                        <el-option label="内蒙古" value="内蒙古"></el-option>
                        <el-option label="宁夏" value="宁夏"></el-option>
                        <el-option label="西藏" value="西藏"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="酒店图片" :rules="rules">
                    <el-upload
                        action=""
                        list-type="picture-card"
                        :file-list="fileList"
                        :http-request="upload"
                        :before-upload="beforeUpload"
                        ref="uploadHotel"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="酒店类型" :rules="rules">
                    <el-select v-model="form.type" placeholder="请选酒店类型">
                        <el-option label="酒店" value="1"></el-option>
                        <el-option label="民宿" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="地址" style="width: 600px" :rules="rules">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>
                <el-form-item
                    label="联系电话"
                    style="width: 320px"
                    :rules="rules"
                >
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="经济间价格" style="width: 250px">
                    <el-input v-model="form.economyPrice"></el-input>
                </el-form-item>
                <el-form-item label="单人间价格" style="width: 250px">
                    <el-input v-model="form.singlePrice"></el-input>
                </el-form-item>
                <el-form-item label="双人间价格" style="width: 250px">
                    <el-input v-model="form.doublePrice"></el-input>
                </el-form-item>
                <el-form-item label="多人间价格" style="width: 250px">
                    <el-input v-model="form.manyPrice"></el-input>
                </el-form-item>
                <el-form-item label="套房价格" style="width: 250px">
                    <el-input v-model="form.vipPrice"></el-input>
                </el-form-item>
                <el-form-item label="酒店星级">
                    <el-select v-model="form.star" placeholder="请选酒店星级">
                        <el-option label="一星级" value="1"></el-option>
                        <el-option label="二星级" value="2"></el-option>
                        <el-option label="三星级" value="3"></el-option>
                        <el-option label="四星级" value="4"></el-option>
                        <el-option label="五星级" value="5"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        @click="onSubmit"
                        :disabled="!this.fileUrl"
                        >立即创建</el-button
                    >
                    <el-button @click="back">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import utils from '@/assets/utils'

export default {
    data() {
        return {
            token: window.localStorage.getItem('token'),
            form: {},
            rules: { required: true },
            fileList: [],
            imgForm: new FormData(),
            imgUrl: '',
            fileName: '',
            fileUrl: '',
        };
    },
    methods: {
        onSubmit() {
            this.$axios({
                method: 'post',
                url: '/hotel/add',
                headers: { token: this.token },
                data: this.form,
            }).then((res) => {
                console.log(res);
                if (res.data.code === 0) {
                    this.$message({
                        type: 'success',
                        message: '创建成功！',
                    });
                    this.back()
                    utils.$emit('getMyHotelList')
                    return true
                }
                if (res.data.code === 500) {
                    this.$message({
                        type: 'error',
                        message: res.data.msg,
                    });
                }
            });
        },
        back() {
            this.form = {};
            this.fileUrl = ''
            this.$refs['uploadHotel'].clearFiles()
        },
        upload() {
            this.$axios({
                method: 'post',
                url: '/oss/upload/hotel',
                headers: { token: this.token },
                data: this.imgForm,
            }).then((res) => {
                let data = res.data;
                if (data.code !== 0) {
                    this.$message.error(res.data.msg);
                    return false;
                }
                this.fileName = data.name;
                this.fileUrl = data.url;
                this.form.pic = this.fileUrl;
                // this.$message.success("上传成功");
            });
        },
        beforeUpload(file) {
            if (file) {
                this.imgForm.append('file', file);
            } else {
                return false;
            }
        },
    },
};
</script>
<style  scoped>
.box {
    width: 900px;
    margin: 30px;
}
</style>>
